<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .van-nav-bar__left {
            width: 500px;
            text-align: center;
            color: #e6c678;
        }

        .van-nav-bar__right {
            width: 300px;
            color: #e6c678;
        }

        .van-nav-bar__right .van-button {
            margin-left: 10px;
        }

        .van-nav-bar__right .van-button .van-button__content {
            padding: 0;
        }

        .van-nav-bar__right .van-button .van-button__text {
            margin: auto;
        }

        .van-nav-bar__left .van-icon-wap-home {
            color: #e6c678;
            margin-right: 10px;
            vertical-align: middle;
        }

        .van-nav-bar__title {
            font-weight: 800;
        }

        .footer {
            position: absolute;
            width: 100%;
            height: 30px;
            bottom: 0;
            left: 0;
            background-color: #000;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            margin: 0;
            padding: 0;
        }

        .footerRight {
            float: right;
            width: auto;
        }

        .footerRight .van-button {
            padding: 3px;
            vertical-align: middle;
        }

        .detail {
            color: #ffa500;
        }

        .signal {
            display: inline-block;
            width: 8px;
            height: 8px;
            line-height: 10px;
            border-radius: 50%;
            text-align: left;
            margin: auto;
            vertical-align: middle;
        }

        .pingStatus-1 {
            background-color: #008000;
        }

        .pingStatus-2 {
            background-color: #ff0000;
        }

        .chooseEqp {
            color: #e6c678;
        }

        .devicePop {
            height: 50%;
            overflow: auto;
        }

        .devicePop .van-col {
            padding: 5px 8px;
            text-align: center;
        }

        .devicePop .van-col .van-button {
            width: 100%;
        }

        .devicePop .van-col .van-button .van-button__text {
            color: #090909;
        }

        .btn {
            border: 1px solid red;
        }

        .footerLeft {
            color: #e6c678;
            float: left;
            width: auto;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar id="safeTop" class="navBar head-index" title="劳伦斯工控机">
                <template #left>
                    <van-icon name="wap-home" size="35" @click="showhandler(flag)"></van-icon>
                    <span class="chooseEqp">{{chooseEqp}}</span>
                    <span style="font-size: 14px;">{{loginMsg}}</span>
                </template>
                <template #right>
                    当前时间: {{currentTime}}
                    <van-button size="small" color="linear-gradient(#fffeaa, #c07d39)" type="primary" @click="setting">
                        下班退出
                    </van-button>
                </template>
            </van-nav-bar>

            <div class="footer">
                <div class="footerLeft">当前版本：{{version}}</div>
                汇智云创(宁波)信息科技有限公司技术支持
                <div class="footerRight">
                    <!-- <span>打印机状态:
                        <span :class="'pingStatus-' + printerStatusVal">【{{printerStatus}}】</span>
                    </span> -->
                    <van-button size="mini" color="linear-gradient(#fffeaa, #c07d39)" @click="setPrint()">
                        打印机重连
                    </van-button>
                    <span class="ip_port">当前登录:
                        <span class="detail">【{{localNetWork}}】</span>
                    </span>
                    <span>当前网络:</span>
                    <span class="signal" :class="'pingStatus-' + status"></span>
                </div>
            </div>

            <van-popup :overlay="false" class="devicePop" v-model="deviceShow" position="bottom">
                <van-col span="4" v-for="item in deviceOctions">
                    <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" @click="equipmentClick(item)">
                        {{item.EquipmentName}}</van-button>
                </van-col>
            </van-popup>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        api.addEventListener({
            name: 'checkNetStatus'
        }, function (ret, err) {
            if (ret.value.res) {
                vm.status = 1
            } else if (ret.value.err) {
                vm.status = 2
            }
        });

        api.addEventListener({
            name: 'refreshEquipment'
        }, function (ret, err) {
            if (window.localStorage.getItem('Equipment')) {
                var Equipment = JSON.parse(window.localStorage.getItem('Equipment'))
                vm.chooseEqp = Equipment.EquipmentName
            } else {
                vm.chooseEqp = '请选择机台'
            }
        });


        vm = new Vue({
            el: '#app',
            data: {
                loginMsg: '【' + window.localStorage.getItem('loginName') + '】' + ' ' + api.pageParam.loginTime + '  ' + api.pageParam.classOption + '',
                flag: true, //侧边栏是否展开
                status: 1,
                localNetWork: api.connectionType,
                deviceShow: false,
                deviceOctions: [],
                currentTime: '',
                chooseEqp: '',
                version: api.appVersion
            },
            created: function () {
                var that = this;

                window.setInterval(function () {
                    var refreshHours = new Date().getHours();
                    var refreshMin = new Date().getMinutes();
                    var refreshSec = new Date().getSeconds();
                    // console.log('时:'+refreshHours + '分:' + refreshMin+'秒:'+refreshSec)
                    if ((refreshHours == '7' && refreshMin == '30' && refreshSec == '0') || (refreshHours == '19' && refreshMin == '30' && refreshSec == '0') ) {
                        // 指定每天凌晨做的事情
                        that.setting()
                    }
                }, 1000);
                // console.log('时:'+refreshHours + '分:' + refreshMin+'秒:'+refreshSec)

                var safeTop = document.getElementById('safeTop')
                safeTop.style.paddingTop = api.safeArea.top + 'px'

                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }

                setInterval(() => {
                    that.currentTime = that.getFormatTime(new Date())
                }, 1000);

                if (window.localStorage.getItem('Equipment')) {
                    var Equipment = JSON.parse(window.localStorage.getItem('Equipment'))
                    that.chooseEqp = Equipment.EquipmentName
                    var newRect

                    if (window.localStorage.getItem('clientHeight') != 752) {
                        newRect = {
                            x: 0,
                            y: 70,
                            w: api.winWidth,
                            h: api.winHeight - 100 - api.safeArea.bottom
                        }
                    } else {
                        newRect = {
                            x: 0,
                            y: 100,
                            w: api.winWidth,
                            h: api.winHeight - 150 - api.safeArea.bottom
                        }
                    }

                    api.openFrame({
                        name: 'home',
                        url: 'home.html',
                        rect: newRect,
                        bgColor: '#29292a',
                        pageParam: {
                            classOption: api.pageParam.classOption,
                            equipment: JSON.parse(window.localStorage.getItem('Equipment')),
                            roleName: api.pageParam.roleName,
                            ZhuSuRoleID: api.pageParam.ZhuSuRoleID,
                            currentBatch: api.pageParam.currentBatch,
                            choosePlan: api.pageParam.choosePlan ? api.pageParam.choosePlan : false
                        }
                    })
                } else {
                    that.getEquipment()
                    that.deviceShow = true
                }
            },

            mounted() {
                const that = this
            },

            watch: {
                currentTime: {
                    handler(val, oldVal) {
                        // console.log('val', JSON.stringify(val))
                        var that = this
                        var longinDate = val.split(' ')[1]
                        var hourMin = longinDate.slice(0, 5)
                        if (hourMin == '07:35') {
                            APP.ajax('getZSVerifyLoginA', { LoginBatch: api.pageParam.currentBatch }, function (res) {
                                if (res.ds.status == 500) {
                                    api.confirm({
                                        title: '提示',
                                        msg: res.ds.msg,
                                        buttons: ['重新登录', '取消']
                                    }, function (ret, err) {
                                        if (ret.buttonIndex == 1) {
                                            api.openFrame({
                                                name: 'login',
                                                url: 'login.html'
                                            })
                                        }
                                    })
                                }
                            })
                        } else if (hourMin == '19:35') {
                            APP.ajax('getZSVerifyLoginA', { LoginBatch: api.pageParam.currentBatch }, function (res) {
                                if (res.ds.status == 500) {
                                    api.confirm({
                                        title: '提示',
                                        msg: res.ds.msg,
                                        buttons: ['重新登录', '取消']
                                    }, function (ret, err) {
                                        if (ret.buttonIndex == 1) {
                                            api.openFrame({
                                                name: 'login',
                                                url: 'login.html'
                                            })
                                        }
                                    })
                                }
                            })
                        }
                    }
                }
            },

            methods: {
                setting() {
                    var that = this
                    api.sendEvent({
                        name: 'loughtOut',
                        extra: {
                            equipment: JSON.parse(window.localStorage.getItem('Equipment'))
                        }
                    })
                },
                setPrint() {
                    var that = this
                    api.sendEvent({
                        name: 'setPrint',
                    })
                },
                getFormatTime(date) {
                    var that = this
                    var seperator1 = "-";
                    var seperator2 = ":";
                    var month = date.getMonth() + 1;
                    var strDate = date.getDate();
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    var second = date.getSeconds();
                    if (month >= 1 && month <= 9) {
                        month = "0" + month;
                    }
                    if (strDate >= 0 && strDate <= 9) {
                        strDate = "0" + strDate;
                    }
                    if (hour >= 0 && hour <= 9) {
                        hour = "0" + hour;
                    }
                    if (minute >= 0 && minute <= 9) {
                        minute = "0" + minute;
                    }
                    if (second >= 0 && second <= 9) {
                        second = "0" + second;
                    }
                    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                        + " " + hour + seperator2 + minute
                        + seperator2 + second;
                    return currentdate;
                },
                showhandler(flag) {
                    var that = this
                    that.flag = !flag
                    if (flag) {
                        if (window.localStorage.getItem('clientHeight') != 752) {
                            api.openFrame({
                                name: 'leftSide',
                                url: 'leftSide.html',
                                rect: {
                                    x: 0,
                                    y: 65,
                                    w: '100',
                                    h: 'auto'
                                },
                                pageParam: api.pageParam
                            })
                        } else {
                            api.openFrame({
                                name: 'leftSide',
                                url: 'leftSide.html',
                                rect: {
                                    x: 0,
                                    y: 100,
                                    w: '150',
                                    h: 'auto'
                                },
                                pageParam: {
                                    classOption: api.pageParam.classOption,
                                    equipment: JSON.parse(window.localStorage.getItem('Equipment')),
                                    roleName: api.pageParam.roleName,
                                    ZhuSuRoleID: api.pageParam.ZhuSuRoleID,
                                    currentBatch: api.pageParam.currentBatch,
                                }
                            })
                        }
                    } else {
                        api.sendEvent({
                            name: 'handlerLeftSide'
                        })
                    }
                },
                getEquipment() {
                    var that = this
                    APP.ajax('getZSEquipment', {empolorName:window.localStorage.getItem('loginName')}, function (res) {
                        that.deviceOctions = res.ds
                    })
                    that.deviceShow = true
                },
                equipmentClick(equipment) {
                    var that = this
                    vm.$toast('您已选择' + equipment.EquipmentName)
                    that.chooseEqp = equipment.EquipmentName
                    window.localStorage.setItem('Equipment', JSON.stringify(equipment))
                    if (window.localStorage.getItem('clientHeight') != 752) {
                        api.openFrame({
                            name: 'home',
                            url: 'home.html',
                            rect: {
                                x: 0,
                                y: 70,
                                w: api.winWidth,
                                h: api.winHeight - 100 - api.safeArea.bottom
                            },
                            bgColor: '#29292a',
                            pageParam: {
                                classOption: api.pageParam.classOption,
                                equipment: JSON.parse(window.localStorage.getItem('Equipment')),
                                roleName: api.pageParam.roleName,
                                ZhuSuRoleID: api.pageParam.ZhuSuRoleID,
                                currentBatch: api.pageParam.currentBatch,
                            }
                        })
                    } else {
                        api.openFrame({
                            name: 'home',
                            url: 'home.html',
                            rect: {
                                x: 0,
                                y: 100,
                                w: api.winWidth,
                                h: api.winHeight - 150 - api.safeArea.bottom
                            },
                            bgColor: '#29292a',
                            pageParam: {
                                classOption: api.pageParam.classOption,
                                equipment: JSON.parse(window.localStorage.getItem('Equipment')),
                                roleName: api.pageParam.roleName,
                                ZhuSuRoleID: api.pageParam.ZhuSuRoleID,
                                currentBatch: api.pageParam.currentBatch,
                            }
                        })
                    }
                }
            }
        })
    };
</script>

</html>